<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
  行内元素被包含在块元素 ，反之不行
  组件行块的组成必须要符合标准文档流
  使用浮动之后可能会造成文档重叠或者不完全在一行，就不符合标准文档流
  1。display  （特别是导航栏 竖着的<ul>通过inline-block写在一行中）
  bolck: 块元素
  inline:行内元素
  inline-bolck：是块元素，但是可以内联，在一行
  2.浮动(float)
  效果是：浮在标签的上面
  3.clear
  clear-left: 左侧不允许有浮动元素
  clear-right:   右侧不允许有浮动元素
  clear-both:    两侧不允许有浮动元素
  4.父级边框塌陷
      1.增加父级元素的高度  （不建议）
      2.增加一个空的div标签，清除浮动
                div{
                   clear: both;
                   margin:0 ;
                   padding: 0;
                }
      3. overflow
         1.在父级元素中增加一个overflow:hidden;
      4.父类添加一个伪类  自己编程比1方法好
               #father{
                    content:' ';
                    display:block;
                    clear:both;
             }
      小结：
      1.浮动元素后面增加空的div 简单 代码中尽量避免空的div
      2.设置父元素的高度，简单，元素假设有了固定高度会被限制
      3.overflow 简单，下拉的场景避免使用
      4.父类添加一个伪类：after（推荐）
                    #father{
                    content:' ';
                    display:block;
                    clear:both;
             }
       写法稍微复杂一点，但是没有副作用，推荐使用  （重点面试）
       5.对比
          display: 方向不可控制
          float: 浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题

  -->
  <style>
    #father{
      width: 1000px;

      border: 1px solid black;
    }
    div{
      border: 1px solid red;
      display: inline-block;
      float: left;
    }
    span{
      border:  1px solid red;
      display: inline-block;
      float: right;
    }
    h1{
      font-size: 10px;
      border: 1px solid red;
      display: inline-block;
      float: right;
      clear: right;
    }
  </style>
</head>
<body>
<div id="father">

    <div>
      块元素
    </div>
    <div>
      <span>span行内元素</span>
    </div>
    <div>
      <h1>h1行内元素</h1>
    </div>

</div>


</body>
</html>
